"use client"

import { useEffect, useRef } from "react"
import { View, Text, StyleSheet, Animated } from "react-native"
import { CheckCircle } from "lucide-react-native"
import { theme } from "../../constants/theme"

interface LearningProgressBarProps {
    learnedCount: number
    totalCount: number
    showCompletedBadge?: boolean
}

export function LearningProgressBar({ learnedCount, totalCount, showCompletedBadge = true }: LearningProgressBarProps) {
    // 进度条动画值
    const progressAnimation = useRef(new Animated.Value(0)).current

    // 防止进度条重复计算
    const isCalculatingProgress = useRef(false)

    // 更新进度条动画
    useEffect(() => {
        if (isCalculatingProgress.current) return
        isCalculatingProgress.current = true

        try {
            // 使用动画平滑过渡到新的进度值
            Animated.timing(progressAnimation, {
                toValue: totalCount > 0 ? learnedCount / totalCount : 0,
                duration: 300,
                useNativeDriver: false,
            }).start()
        } finally {
            isCalculatingProgress.current = false
        }
    }, [learnedCount, totalCount, progressAnimation])

    return (
        <View style={styles.progressContainer}>
            <View style={styles.progressInfo}>
                <Text style={styles.progressText}>
                    已学单词: <Text style={styles.progressCount}>{learnedCount}</Text>/{totalCount}
                </Text>
                {showCompletedBadge && learnedCount === totalCount && totalCount > 0 && (
                    <View style={styles.completedBadge}>
                        <CheckCircle size={14} color={theme.colors.secondary.green.default} />
                        <Text style={styles.completedText}>已完成</Text>
                    </View>
                )}
            </View>
            <View style={styles.progressBar}>
                <Animated.View
                    style={[
                        styles.progressFill,
                        {
                            width: progressAnimation.interpolate({
                                inputRange: [0, 1],
                                outputRange: ["0%", "100%"],
                            }),
                        },
                    ]}
                />
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    progressContainer: {
        paddingHorizontal: theme.spacing.lg,
        paddingVertical: theme.spacing.md,
        backgroundColor: "rgba(255, 255, 255, 0.5)",
        marginHorizontal: theme.spacing.lg,
        borderRadius: theme.borderRadius.large,
        marginBottom: theme.spacing.md,
    },
    progressInfo: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        marginBottom: theme.spacing.sm,
    },
    progressText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.darkGray,
    },
    progressCount: {
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.primary.default,
    },
    completedBadge: {
        flexDirection: "row",
        alignItems: "center",
        backgroundColor: theme.colors.secondary.green.light,
        paddingHorizontal: theme.spacing.md,
        paddingVertical: theme.spacing.xs,
        borderRadius: theme.borderRadius.medium,
        gap: 4,
    },
    completedText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.secondary.green.default,
        fontWeight: theme.fontWeight.semiBold,
    },
    progressBar: {
        height: 8,
        backgroundColor: theme.colors.neutral.lightGray,
        borderRadius: 4,
        overflow: "hidden",
    },
    progressFill: {
        height: "100%",
        backgroundColor: theme.colors.secondary.green.default,
        borderRadius: 4,
    },
})

